import { IFormProps, size } from "../../utils/common";
import React from "react";
import { connect } from "dva";
import { Form, Row, Col, Table, Button, Input, Select, Popconfirm } from "antd";
import { PaginationProps } from "antd/lib/pagination";
const Styles = require("../../styles/index.less");
import * as api from "../../api/api";
export interface IUserPointsPros extends IFormProps {
  mall: any;
}
class UserPoints extends React.PureComponent<IUserPointsPros, any> {
  constructor(props) {
    super(props);
    this.state = {};
  }

  componentDidMount() {
    this.getUserPoints();
  }
  search = () => {
    this.getUserPoints();
  };

  getUserPoints = (payload?) => {
    payload = Object.assign(
      {},
      this.props.mall.userPointSearchs,
      this.props.form.getFieldsValue(),
      { ...payload }
    );
    this.props.dispatch({
      type: "mall/getAllUserPoints",
      payload
    });
  };

  reset = () => {
    this.props.form.resetFields();
  };

  setVisible = (visible = false) => {
    this.setState({ visible });
  };
  OnPointTypeChange = pointType => {
    let pageIndex = 1;
    let payload = Object.assign({}, { pointType, pageIndex });
    this.getUserPoints(payload);
  };
  OnPointStatusChange = pointStatus => {
    let pageIndex = 1;
    let payload = Object.assign({}, { pointStatus, pageIndex });
    this.getUserPoints(payload);
  };

  render(): JSX.Element {
    const { getFieldDecorator } = this.props.form;
    const { loading } = this.props;
    const {
      userPoints: { totalCount, items },
      userPointSearchs: {
        pageIndex,
        pageSize,
        keywords,
        pointType,
        pointStatus
      }
    } = this.props.mall;
    const pageChange = (pageIndex, pageSize) => {
      let payload = Object.assign({}, this.props.mall.userPointSearchs, {
        pageIndex,
        pageSize
      });
      this.getUserPoints(payload);
    };
    const pagination: PaginationProps | boolean = {
      total: totalCount,
      defaultCurrent: 1,
      current: pageIndex,
      pageSize: pageSize,
      showSizeChanger: true,
      showTotal: total => `共 ${total} 条`,
      showQuickJumper: true,
      pageSizeOptions: ["10", "20", "30", "50"],
      onShowSizeChange: pageChange,
      onChange: pageChange
    };
    return (
      <Row className={Styles.F_BG_WHITE1}>
        <Row className={Styles.F_BG_WHITE}>
          <Col span={24}>
            <Form layout="inline">
              <Form.Item label=" 关键字">
                {getFieldDecorator("keywords", {
                  initialValue: keywords
                })(
                  <Input
                    style={{ width: 200 }}
                    size={size}
                    placeholder="输入关键字"
                  />
                )}
              </Form.Item>
              <Form.Item label="类型">
                {getFieldDecorator("pointType", {
                  initialValue: pointType
                })(
                  <Select
                    style={{ width: 120 }}
                    onChange={this.OnPointTypeChange}
                  >
                    <Select.Option value="">全部</Select.Option>
                    <Select.Option value={1}>体验金</Select.Option>
                    <Select.Option value={2}>可用体验金</Select.Option>
                  </Select>
                )}
              </Form.Item>
              <Form.Item label="状态">
                {getFieldDecorator("pointStatus", {
                  initialValue: pointStatus
                })(
                  <Select
                    style={{ width: 120 }}
                    onChange={this.OnPointStatusChange}
                  >
                    <Select.Option value="">全部</Select.Option>
                    <Select.Option value={1}>收入</Select.Option>
                    <Select.Option value={2}>支出</Select.Option>
                  </Select>
                )}
              </Form.Item>
              <Form.Item>
                <Button
                  size={size}
                  type="primary"
                  loading={loading}
                  onClick={this.search}
                >
                  查询
                </Button>
              </Form.Item>
            </Form>
            <Col span={24}>
              <hr className={Styles.hrBorder} />
              <h3>用户体验金列表(共 {totalCount} 条)</h3>
            </Col>
            <Col span={24}>
              <Table
                dataSource={items}
                bordered
                pagination={pagination}
                rowKey={(record: api.SingleUserMallUsersVOUserPointsVO) =>
                  String(record.id)
                }
                loading={loading}
              >
                <Table.Column
                  title="序号"
                  key="no"
                  render={(text, record, index) => {
                    return (pageIndex - 1) * pageSize + index + 1;
                  }}
                />
                <Table.Column
                  title="类型"
                  key="pointTypeDes"
                  dataIndex="pointTypeDes"
                />
                <Table.Column
                  title="用户"
                  key="userName"
                  dataIndex="userName"
                />
                <Table.Column
                  title="头像"
                  key="userAvatar"
                  render={(
                    text,
                    record: api.SingleUserMallUsersVOUserPointsVO,
                    index
                  ) => {
                    return <img width="100px" src={record.userAvatar} />;
                  }}
                />
                <Table.Column title="来源用户" key="name" dataIndex="name" />
                <Table.Column
                  title="来源头像"
                  key="avatar"
                  render={(
                    text,
                    record: api.SingleUserMallUsersVOUserPointsVO,
                    index
                  ) => {
                    return <img width="100px" src={record.avatar} />;
                  }}
                />
                <Table.Column title="详情" key="title" dataIndex="title" />
                <Table.Column
                  title="收支"
                  key="statusDes"
                  dataIndex="statusDes"
                />
              </Table>
            </Col>
          </Col>
        </Row>
      </Row>
    );
  }
}
export default connect(({ mall, loading: { models: { mall: loading } } }) => ({
  mall,
  loading
}))(Form.create()(UserPoints));
